<template>
  <custom-title-bar :title="query.choose ? '选择地址' : '地址管理'" background-color="#fff" />
  <view
    class="content"
    :class="query.choose ? 'white' : 'grey'"
    :style="{ paddingTop: capsule.bottom + capsule.spacingBotton * 2 + 'px' }"
  >
    <view class="add-btn" :class="!query.choose ? 'white' : 'grey'" @click="callOutAddressFormPopup()">+ 添加地址</view>
    <!-- <view class="address-list"> -->
    <!-- 滑动操作分区 -->
    <uni-swipe-action class="address-list">
      <!-- 滑动操作项 -->
      <uni-swipe-action-item v-for="(addressObj, index) in addressBookData" :key="index">
        <view class="address-item" :class="!query.choose ? 'white' : 'grey'" @click="changeChecked(addressObj)">
          <view class="base-checkbox" v-if="query.choose">
            <view :class="{ checked: checked == addressObj.id, disable: !addressObj.isReasonable }"></view>
          </view>
          <view class="address-content">
            <view class="address-desc"
              ><span
                v-if="addressObj.label"
                class="address-label"
                :style="labelStyle[addressObj.label] ?? labelStyle['default']"
                >{{ addressObj.label }}</span
              >
              <span>{{ `${addressObj.detailAddress}  ${addressObj.specificAddress ?? ''}` }}</span>
            </view>
            <view class="consignee-info">{{
              `${addressObj.consignee} ${addressObj.sex === Sex.MALE ? '先生' : '女士'} ${addressObj.phone}`
            }}</view>
          </view>
          <view @click.prevent="callOutAddressFormPopup(addressObj)" class="edit">
            <uni-icons type="compose" size="20"></uni-icons>
          </view>
        </view>

        <!-- 右侧插槽 -->
        <template #right>
          <span @tap.prevent="remove(addressObj.id)" class="delete-button">删除</span>
        </template>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <address-add-or-edit v-model:form="addressForm" @save="refreshList()" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { AddressBook } from '@/types/entity/AddressBook'
const { capsule } = $store.app.getSystemParam()
import CustomTitleBar from '@/components/custom-title-bar/index.vue'
import AddressAddOrEdit from './address-add-or-edit/index.vue'
import $store from '@/store'
import $API from '@/api'
import type { AddressBookResponse } from '@/types/response/address-book'
import type R from '@/types/conduit/R'
import { Sex } from '@/enum/Sex'
const query = defineProps({
  choose: {
    type: Boolean,
    default: false
  },
  shopId: {
    type: Number,
    default: null
  }
})
const checked = ref<number>()
const addressForm = ref<AddressBook>()
// 点击时
function changeChecked(addressBookResponse: AddressBookResponse) {
  if (addressBookResponse.isReasonable && query.choose) {
    // 选中
    checked.value = addressBookResponse.id
    // 发送事件-用户选择了地址
    $store.user.userChooseAddressEvent.emit(addressBookResponse)
    setTimeout(() => {
      // 选择完地址返回上一页
      uni.navigateBack()
    }, 150)
  }
}
const addressBookData = ref<AddressBookResponse[]>([])
const labelStyle: { [key: string]: { color: string; backgroundColor: string } } = {
  学校: {
    color: '#4baf5a',
    backgroundColor: '#ecf7e6'
  },
  家: {
    color: '#f37e23',
    backgroundColor: '#fef2d6'
  },
  公司: {
    color: '#2c81bf',
    backgroundColor: '#e0edfa'
  },
  default: {
    color: '#ffd344',
    backgroundColor: '#ffe89f'
  }
}
// 点击添加/编辑地址
function callOutAddressFormPopup(addressBook?: AddressBook) {
  if (addressBook == null) addressBook = new AddressBook()
  addressForm.value = addressBook
}
// 刷新列表
async function refreshList() {
  let result: R<AddressBookResponse[]> | null = null
  if (query.shopId != null) {
    result = await $API.addressBook.preferredAddressList(query.shopId)
  } else {
    // 获取普通的列表
    result = await $API.addressBook.userAddressList()
  }
  if (result != null && result.success) addressBookData.value = result.data
}
// 列表初始化
onMounted(async () => {
  refreshList()
})
// 当点击删除收货地址
async function remove(addressBookId: number) {
  await $API.addressBook.deleteItem(addressBookId)
  refreshList()
}
</script>

<style scoped lang="scss">
$radius-size: 20rpx;

.grey {
  background-color: #f5f5f5;
}

.white {
  background-color: #fff;
}

.content {
  z-index: 0;
  padding: 20rpx 5%;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  .add-btn {
    width: 100%;
    height: 100rpx;
    font-weight: 700;
    border-radius: $radius-size;
    text-align: center;
    color: #fff;
    background: #37ac75;
    box-sizing: border-box;
    line-height: 100rpx;
  }

  .address-list {
    // width: 100%;

    .address-item {
      display: flex;
      align-items: center;
      margin-top: 25rpx;
      padding: 40rpx 30rpx;
      border-radius: $radius-size;
      place-content: center space-between;
      box-sizing: border-box;

      .base-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 30rpx;
        height: 30rpx;
        border: 1px solid #37ac75;
        border-radius: 50%;
        background-color: #fff;

        %checked {
          padding: 30%;
          width: 0;
          height: 0;
          border-radius: 50%;
        }

        .checked {
          @extend %checked;

          background-color: #37ac75;
        }

        .disable {
          @extend %checked;

          background-color: #a9a9a9;
        }
      }

      .address-content {
        display: flex;
        justify-content: space-between;

        // overflow: hidden;
        margin: 0 20rpx;
        width: 0%;
        flex-grow: 1;
        flex-direction: column;

        .address-desc {
          overflow: hidden;
          height: 60rpx;
          font-weight: 700;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 60rpx;

          .address-label {
            margin-right: 15rpx;
            padding: 4rpx 16rpx;
            font-size: 28rpx;
            border-radius: 10rpx;
          }
        }
      }
    }

    .delete-button {
      display: flex;
      align-items: center;
      padding: 0 15rpx;
      font-size: 30rpx;
      color: red;
      background-color: #fff0;
    }
  }
}
</style>
